<template>
  <div class="discovery-container">
    <!-- 轮播图 -->
    <el-carousel class :interval="4000" type="card">
      <el-carousel-item v-for="(item,i) in banner" :key="i">
        <img :src="item.imageUrl" alt />
      </el-carousel-item>
    </el-carousel>
    <!-- 推荐歌单 -->
    <div class="recommend">
      <h3 class="title">推荐歌单</h3>
      <div class="items">
        <div class="item" v-for="(item,i) in list" :key="i" @click="toPlaylist(item.id)">
          <div class="img-wrap">
            <div class="desc-wrap">
              <span class="desc">{{item.copywriter}}</span>
            </div>
            <img :src="item.picUrl" alt />
            <span class="iconfont icon-play"></span>
          </div>
          <p class="name">{{item.name}}</p>
        </div>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="news">
      <h3 class="title">最新音乐</h3>
      <div class="items">
        <div class="item" v-for="(item,i) in songs" :key="i">
          <div class="img-wrap">
            <img :src="item.picUrl" alt />
            <span class="iconfont icon-play" @click="playMusic(item.id)"></span>
          </div>
          <div class="song-wrap">
            <div class="song-name">{{item.name}}</div>
            <div class="singer">{{item.song.artists[0].name}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐MV -->
    <div class="mvs">
      <h3 class="title">推荐MV</h3>
      <div class="items">
        <div class="item" v-for="(item,i) in mvs" :key="i" @click="toMV(item.id)">
          <div class="img-wrap">
            <img :src="item.picUrl" alt />
            <span class="iconfont icon-play"></span>
            <div class="num-wrap">
              <div class="iconfont icon-play"></div>
              <div class="num">{{item.playCount}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="name">{{item.name}}</div>
            <div class="singer">{{item.artistName}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  name: "discovery",
  data() {
    return {
      // 轮播图
      banner: [],
      // 推荐歌单
      list: [],
      // 最新音乐
      songs: [],
      // 最新mv
      mvs: [],
    };
  },
  computed:{
       ...mapGetters(['isPlay'])
  },
  created() {
    // 轮播图
    this.$http.get("/banner").then((res) => {
      this.banner = res.data.banners;
    });

    // 推荐歌单
    this.$http
      .get("/personalized", { params: { limit: 10 } })
      .then((res) => {
        this.list = res.data.result;
      });

    // 最新音乐
    this.$http.get("/personalized/newsong").then((res) => {
      this.songs = res.data.result;
    });

    // 最新mv
    this.$http.get("/personalized/mv").then((res) => {
      this.mvs = res.data.result;
    });
  },
  methods: {
    ...mapMutations(['setUrl','setIsPlay']),
    // mv跳转
    toMV(id) {
      this.$router.push(`/tag/mv?q=${id}`);
    },
    // 歌单跳转
    toPlaylist(id) {
      this.$router.push(`/tag/playlist?q=${id}`);
    },
    // 播放歌曲
    playMusic(id) {
      this.$http
        .get("https://autumnfish.cn/song/url", { params: { id } })
        .then((res) => {
          console.log(res)
          let url = res.data.data[0].url;
          // this.$parent.musicUrl = url;
           this.setUrl(url);
        if (this.isPlay) {
          this.setIsPlay(false);
        } else {
          this.setIsPlay(true);
        }
        });
    },
  },
};
</script>

<style >
</style>
